<template>
  <div>
    <div>{{ count.num }}</div>
    <hr />
    <button @click="changeNum">修改数字</button>
    <btn></btn>
  </div>
</template>

<script setup lang="ts">
import type { Ref } from "vue";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

type P = {
  num?: number;
};

// 泛型写法一：
// 适合用于属性较少时
// const count = ref<P>({ num: 18 });

// 泛型写法二：
// 适合用于属性较多时，或者类型较复杂的时候
const count: Ref<P> = ref({ num: 28 });

// 普通写法：
// 依靠类型推导实现
// const count = ref({ num: 18 });
const changeNum = () => {
  count.value.num = 28;
  console.log(count);
};

const route = useRoute();
onMounted(() => {
  document.title = route.meta.title as string; // 修改网站标题
});
</script>

<style lang="scss" scoped></style>
